﻿/*
 * Dual licensed under the MIT (MIT_LICENSE.txt)
 * and GPL Version 2 (GPL_LICENSE.txt) licenses.
 *
 * Version: 1.1.1
 * Requires jquery ui tabs 1.9+
 *
 * t.j
 */

$
		.extend(
				$.ui.tabs.prototype,
				{
					paging : function() {

						var self = this, initialized = false, resizeTimer = null, windowHeight = $(
								window).height(), windowWidth = $(window)
								.width();

						function init() {

							self.tabsPanel = $('<div />').addClass(
									'ui-tabs-paging-full');
							self.scrollPanel = $('<div />').addClass(
									'ui-tabs-paging-display').append(
									self.tabsPanel);

							self.nextButton = $(
									'<div ><div class="ui-icon ui-icon-circle-arrow-e" /></div>')
									.addClass(
											'ui-tabs-paging-next ui-state-default')
									.hover(
											function() {
												self.nextButton
														.toggleClass('ui-state-hover');
											})
									.mousedown(
											function(e) {
												e.preventDefault();

												var tabsPanelWidth = 0;
												self.tabs.each(function() {
													tabsPanelWidth += $(this)
															.outerWidth(true);
												});

												var offsetleft = self.scrollPanel
														.width()
														- tabsPanelWidth;
												if (offsetleft > 0)
													offsetleft = 0;

												self.tabsPanel.stop();
												self.tabsPanel.animate({
													left : offsetleft
												}, 'fast');

											}).mouseup(function(e) {
										e.preventDefault();
										self.tabsPanel.stop();
									});
							self.prevButton = $(
									'<div ><div class="ui-icon ui-icon-circle-arrow-w" /></div>')
									.addClass(
											'ui-tabs-paging-prev ui-state-default')
									.hover(
											function() {// ui-icon-arrowthick-1-w
												self.prevButton
														.toggleClass('ui-state-hover');
											}).mousedown(function(e) {
										e.preventDefault();
										self.tabsPanel.stop();
										self.tabsPanel.animate({
											left : 0
										}, 'fast');
									}).mouseup(function(e) {
										e.preventDefault();
										self.tabsPanel.stop();
									});
						}

						function update() {

							destroy();

							var tabsPanelWidth = 0;
							self.tabs.each(function() {
								tabsPanelWidth += $(this).outerWidth(true);
							});

							if (tabsPanelWidth > self.tablist.width()) {

								self.tabsPanel.append(self.tabs);

								self.tablist.append(self.prevButton);
								self.tablist.append(self.scrollPanel);
								self.tablist.append(self.nextButton);

								self.scrollPanel.width(self.tablist.width()
										- self.prevButton.outerWidth(true)
										- self.nextButton.outerWidth(true) - 1);

								self.tabsPanel.width(tabsPanelWidth * 2);

								// 当前 tabs 左边的位置
								var currentLeft = self.tabsPanel.position().left
										- self.scrollPanel.position().left;
								if (currentLeft > 0)
									currentLeft = 0;
								currentLeft *= -1;
								// tabs 滚动容器长度
								var scrollWidth = self.scrollPanel.width();

								if (tabsPanelWidth < currentLeft + scrollWidth) {
									self.tabsPanel
											.css(
													'left',
													((tabsPanelWidth - scrollWidth) * -1)
															+ 'px');
								}

								initialized = true;

							}

							$(window).bind('resize', handleResize);
						}

						function handleResize() {
							if (resizeTimer)
								clearTimeout(resizeTimer);

							if (windowHeight != $(window).height()
									|| windowWidth != $(window).width())
								resizeTimer = setTimeout(reupdate, 100);
						}

						function reupdate() {
							windowHeight = $(window).height();
							windowWidth = $(window).width();
							update();
						}

						function destroy() {

							$(window).unbind('resize', handleResize);

							self.tablist.append(self.tabs);

							self.scrollPanel.detach();
							self.prevButton.detach();
							self.nextButton.detach();

							initialized = false;

						}

						function updatePosition() {
							// tabs 的总长度
							var tabsPanelWidth = 0;
							// 选中的 tab 左边的位置
							var selectedLeft = 0;
							// 选中的 Tab
							var selectedLi = 0;
							self.tabs.each(function() {
								if ($(this).hasClass('ui-state-active')) {
									selectedLeft = tabsPanelWidth;
									selectedLi = $(this);
								}
								tabsPanelWidth += $(this).outerWidth(true);
							});

							if (tabsPanelWidth > self.tablist.width()) {

								// 选中的 Tab 长度
								var selectedWidth = selectedLi.outerWidth(true);
								// 当前 tabs 左边的位置
								var currentLeft = self.tabsPanel.position().left
										- self.scrollPanel.position().left;
								if (currentLeft > 0)
									currentLeft = 0;
								currentLeft *= -1;
								// tabs 滚动容器长度
								var scrollWidth = self.scrollPanel.width();
								// 需要滚动到的位置
								var targetLeft = -1;
								if (scrollWidth > 0) {
									if (selectedLeft < currentLeft) {
										targetLeft = selectedLeft;
									} else if (selectedLeft + selectedWidth > currentLeft
											+ scrollWidth) {
										if (selectedWidth > scrollWidth) {
											targetLeft = selectedLeft;
										} else {
											targetLeft = selectedLeft
													- scrollWidth
													+ selectedWidth;
										}
									} else if (currentLeft + scrollWidth > tabsPanelWidth) {
										targetLeft = tabsPanelWidth
												- scrollWidth;
									}
									// 滚动出选中的tab
									if (targetLeft >= 0) {
										self.tabsPanel.stop();
										self.tabsPanel.animate({
											left : targetLeft * -1
										}, 'fast');
									}
								}
							}
						}

						var tabsAdd = self.add;
						self.add = function(url, label, index) {
							if (initialized)
								destroy();

							tabsAdd.apply(this, [ url, label, index ]);

							update();
						};

						var tabsRemove = self.remove;
						self.remove = function(index) {
							if (initialized)
								destroy();

							var beforeTab = null;
							self.tabs.each(function() {
								if ($(this).hasClass('ui-state-active')) {
									beforeTab = $(this);
									return false;
								}
							});
							var beforeWidth = beforeTab.outerWidth(true);

							tabsRemove.apply(this, [ index ]);

							update();

							// var afterTab = null;
							// var tabsPanelWidth = 0;
							// self.tabs.each(function () {
							// if ($(this).hasClass('ui-state-active')) {
							// afterTab = $(this);
							// }
							// tabsPanelWidth += $(this).outerWidth(true);
							// });

							// if (afterTab.length > 0) {
							// if (afterTab[0] != beforeTab[0]) {
							// updatePosition();
							// } else {
							// if (tabsPanelWidth > self.tablist.width()) {
							// //当前 tabs 左边的位置
							// var currentLeft = self.tabsPanel.position().left
							// - self.scrollPanel.position().left;
							// if (currentLeft > 0) currentLeft = 0;
							// currentLeft *= -1;
							// //tabs 滚动容器长度
							// var scrollWidth = self.scrollPanel.width();
							// if (currentLeft + scrollWidth > tabsPanelWidth) {
							// var targetLeft = tabsPanelWidth - scrollWidth;
							// self.tabsPanel.stop();
							// self.tabsPanel.animate({ left: targetLeft * -1 },
							// 'slow');
							// }
							// }
							// }
							// }
						};
						var tabsSelect = self.select;
						self.select = function(index) {
							tabsSelect.apply(this, [ index ]);
							updatePosition();
						};

						$.extend($.ui.tabs.prototype, {
							pagingDestroy : function() {
								destroy();
							},
							pagingUpdate : function() {
								update();
							}
						});

						init();
						update();
					}
				});
